<template>
	<view class="area_m">
		<u-top-tips ref="uTips"></u-top-tips>
		<view class="head_area">
			<scroll-view class="select_day" scroll-x="true">
				<view :class="!(isActive==index)?'block_day':'active_day'" v-for="(item,index) in day_list" :key="index"
					@click="get_index(index)">
					<view class="days_des">
						<span>{{item.week}}</span>
						{{item.month}}月{{item.day}}日
					</view>
				</view>
			</scroll-view>
			<view v-for="(item,index) in teacher" :key="index">
				<show_teacher :teacher="item"></show_teacher>
			</view>
		</view>
		<u-back-top :scroll-top="scrollTop" icon="arrow-up" tips="返回" top="100"></u-back-top>
		<u-loadmore :status="status" />
	</view>
</template>

<script>
	import show_teacher from '../../components/des_teacher/des_teacher.vue'
	export default {
		data() {
			return {
				status: 'loadmore',
				scrollTop: 0,
				isActive: 0,
				day_list:[
					{month:"1",week:"2",day:"3"},
				],
				scrollTop: 0,
				teacher: [{
					name: '赵静',
					classfi: '校内老师',
					method: '线下或线下',
					tuijian: 10,
					time: '14:00-15:00 15:00-17:00',
					info: '太原工业学院心理健康中心专老师，负责中心一切事物以及宣传中心'
				}],
			}
		},
		components: {
			show_teacher
		},
		onReady() {
			this.$refs.uTips.show({
				title: '预约老师时，注意预约的日期和时间,日期选择可左右滑动',
				type: 'success',
				duration: '2300'
			})
		},
		onPageScroll(e) {
			this.scrollTop = e.scrollTop
		},
		methods: {
			get_index(index) {
				this.isActive = index
			}

		},
		onReachBottom() {
			if (this.page >= 3) return
			this.status = 'loading'
			this.page = ++this.page
			setTimeout(() => {
				this.list += 10
				if (this.page >= 3) this.status = 'nomore'
				else this.status = 'loading'
			}, 2000)
		}
	}
</script>

<style lang="less">
	.area_m {
		height: 100vh;
		background-color: white;
		.head_area {
			margin-top: -10rpx;

			.select_day {
				white-space: nowrap;
				width: 750rpx;
				height: 100rpx;
				border: 1px 2px 1px 1px lightgray solid;
				box-shadow: 1px 1px 1px 1px lightgray;
				background-color: rgb(25, 190, 107);
				border-radius: 0 0px 20px 20px;

				.block_day {
					width: 130rpx;
					display: inline-block;

					.days_des {
						width: 100rpx;
						height: 80rpx;
						font-size: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}
				}

				.active_day {
					width: 130rpx;
					display: inline-block;
					color: white;

					.days_des {
						width: 100rpx;
						height: 80rpx;
						font-size: 25rpx;
						display: flex;
						justify-content: center;
						align-items: center;
						flex-direction: column;
					}
				}
			}
		}
	}
</style>
